// 创建地图
var map = new AMap.Map('container_Map', {
    zoom: 11, //缩放级别
    center: [114.113006, 22.573528], //中心点坐标
});

// 构造点标记

//点标记1：莲花山公园
var marker_MontLotusPark = new AMap.Marker({
    map: map,				                // 要显示该 marker 的地图对象
    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
    position: [114.054237,22.555799],		// 点标记在地图上显示的位置
    title: '莲花山公园',					 // 鼠标滑过点标记时的文字提示
    cursor: 'pointer'						// 指定鼠标悬停时的鼠标样式
});
    //鼠标滑过点标记时，弹出信息窗口
var infoWindow_MontLotusPark = new AMap.InfoWindow({
    content: `
        <div style="width: 200px;">
            <h3>莲花山公园</h3>
            <p></p>
            <img src="images/莲花山公园.jpg" width="200" height="150">
            <p>点击查看更多内容</p>
        </div>`,
    offset: new AMap.Pixel(200, 150)          // 调整信息窗口的位置偏移量
})
marker_MontLotusPark.on('mouseover', function(e) {infoWindow_MontLotusPark.open(map, marker_MontLotusPark.getPosition());});
marker_MontLotusPark.on('mouseout', function(e) {infoWindow_MontLotusPark.close();});
marker_MontLotusPark.on('click', function(e) {window.open("https://baike.baidu.com/item/%E8%8E%B2%E8%8A%B1%E5%B1%B1%E5%85%AC%E5%9B%AD/15484459");});
map.add(marker_MontLotusPark);


// 点标记2：飞马机器人总部
var marker_FeimaRobotic = new AMap.Marker({
    map: map,
    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
    position: [114.004380,22.593118],
    title: '飞马机器人总部',
    cursor: 'pointer'
})
var infoWindow_FeimaRobotic = new AMap.InfoWindow({
    content: `
        <div style="width: 200px;">
            <h3>深圳飞马机器人股份有限公司</h3>
            <p></p>
            <img src="images/飞马机器人.jpg" width="200" height="150">
            <p>点击查看更多内容</p>
        </div>`,
    offset: new AMap.Pixel(200, 150)
});
marker_FeimaRobotic.on('mouseover', function(e) {infoWindow_FeimaRobotic.open(map, marker_FeimaRobotic.getPosition());});
marker_FeimaRobotic.on('mouseout', function(e) {infoWindow_FeimaRobotic.close();});
marker_FeimaRobotic.on('click', function(e) {window.open("https://feimarobotics.com/zhcn");});
map.add(marker_FeimaRobotic);

// 点标记3：大疆创新科技有限公司
var marker_DJI = new AMap.Marker({
    map: map,
    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
    position: [113.9450531,22.53078275307827],
    title: '大疆创新科技有限公司',
})
var infoWindow_DJI = new AMap.InfoWindow({
    content: `
        <div style="width: 200px;">
            <h3>大疆创新科技有限公司</h3>
            <p></p>
            <img src="images/大疆.jpg" width="200" height="150">
            <p>点击查看更多内容</p>
        </div>`,
    offset: new AMap.Pixel(200, 150)
})
marker_DJI.on('mouseover', function(e) { infoWindow_DJI.open(map, marker_DJI.getPosition());});
marker_DJI.on('mouseout', function(e) {infoWindow_DJI.close();});
marker_DJI.on('click', function(e) {window.open("https://www.dji.com/cn");});
map.add(marker_DJI);

// 点标记4：哈尔滨工业大学（深圳校区）
var marker_HIT = new AMap.Marker({
    map: map,
    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
    position: [113.973847,22.586606],
    title: '哈尔滨工业大学（深圳校区）',
})
var infoWindow_HIT = new AMap.InfoWindow({
    content: `
        <div style="width: 200px;">
            <h3>哈尔滨工业大学（深圳校区）</h3>
            <p></p>
            <img src="images/哈工深.jpg" width="200" height="150">
            <p>点击查看更多内容</p>
        </div>`,
    offset: new AMap.Pixel(200, 150)
})
marker_HIT.on('mouseover', function(e) { infoWindow_HIT.open(map, marker_HIT.getPosition());});
marker_HIT.on('mouseout', function(e) {infoWindow_HIT.close();});
marker_HIT.on('click', function(e) {window.open("https://www.hitsz.edu.cn/");});
map.add(marker_HIT);

// 点标记5：香港中文大学（深圳）
var marker_CUHKSZ = new AMap.Marker({
    map: map,
    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
    position: [114.212807,22.688155],
    title: '香港中文大学（深圳）',
})
var infoWindow_CUHKSZ = new AMap.InfoWindow({
    content: `
        <div style="width: 200px;">
            <h3>香港中文大学（深圳）</h3>
            <p></p>
            <img src="images/港中深.jpg" width="200" height="150">
            <p>点击查看更多内容</p>
        </div>`,
    offset: new AMap.Pixel(200, 150)
})
marker_CUHKSZ.on('mouseover', function(e) { infoWindow_CUHKSZ.open(map, marker_CUHKSZ.getPosition());});
marker_CUHKSZ.on('mouseout', function(e) {infoWindow_CUHKSZ.close();});
marker_CUHKSZ.on('click', function(e) {window.open("https://www.cuhk.edu.cn/zh-hans");});
map.add(marker_CUHKSZ);

// 点标记6：深圳当代艺术与城市规划馆
var marker_SZDAC = new AMap.Marker({
    map: map,
    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
    position: [114.061385,22.545989],
    title: '深圳当代艺术与城市规划馆',
})
var infoWindow_SZDAC = new AMap.InfoWindow({
    content: `
        <div style="width: 200px;">
            <h3>深圳当代艺术与城市规划馆</h3>
            <p></p>
            <img src="images/规划馆.jpg" width="200" height="150">
            <p>点击查看更多内容</p>
        </div>`,
    offset: new AMap.Pixel(200, 150)
})
marker_SZDAC.on('mouseover', function(e) { infoWindow_SZDAC.open(map, marker_SZDAC.getPosition());});
marker_SZDAC.on('mouseout', function(e) {infoWindow_SZDAC.close();});
marker_SZDAC.on('click', function(e) {window.open("https://baike.baidu.com/item/%E6%B7%B1%E5%9C%B3%E5%B8%82%E5%BD%93%E4%BB%A3%E8%89%BA%E6%9C%AF%E4%B8%8E%E5%9F%8E%E5%B8%82%E8%A7%84%E5%88%92%E9%A6%86/22744284?fr=ge_ala");});
map.add(marker_SZDAC);


document.addEventListener('DOMContentLoaded', function() {
    //加载地图控件
AMapUI.loadUI(['overlay/SimpleControl'], function(SimpleControl) {
    
    var controlBar = document.getElementById('control_bar');

    var btn715 = document.getElementById('715');
    btn715.addEventListener('click', function() {
        // marker_MontLotusPark.setMap(map);
        // marker_FeimaRobotic.setMap(map);
        marker_DJI.setMap(null);
        marker_HIT.setMap(null);
        marker_CUHKSZ.setMap(null);
        marker_SZDAC.setMap(null);
        alert("test1");
    });

    var btn716 = document.getElementById('716');
    btn716.addEventListener('click', function(e) {
        marker_MontLotusPark.setMap(null);
        marker_FeimaRobotic.setMap(null);
        marker_DJI.setMap(map);
        marker_HIT.setMap(map);
        marker_CUHKSZ.setMap(null);
        marker_SZDAC.setMap(null);
    });

    var btn717 = document.getElementById('717');
    btn717.addEventListener('click', function(e) {
        marker_MontLotusPark.setMap(null);
        marker_FeimaRobotic.setMap(null);
        marker_DJI.setMap(null);
        marker_HIT.setMap(null);
        marker_CUHKSZ.setMap(map);
        marker_SZDAC.setMap(null);
    });

    var btn718 = document.getElementById('718');
    btn718.addEventListener('click', function(e) {
        marker_MontLotusPark.setMap(null);
        marker_FeimaRobotic.setMap(null);
        marker_DJI.setMap(null);
        marker_HIT.setMap(null);
        marker_CUHKSZ.setMap(null);
        marker_SZDAC.setMap(map);
    });

    var btnAll = document.getElementById('all');
    btnAll.addEventListener('click', function(e) {
        marker_MontLotusPark.setMap(map);
        marker_FeimaRobotic.setMap(map);
        marker_DJI.setMap(map);
        marker_HIT.setMap(map);
        marker_CUHKSZ.setMap(map);
        marker_SZDAC.setMap(map);
    });
   
    
});
})